<script setup lang="ts">
import { ref, onMounted, reactive } from "vue"

import { Plus, Search } from "@element-plus/icons-vue";
import { PureTableBar } from "@/components/RePureTableBar";
import { useColumns } from "./utils/columns";
import createDept from "./components/dialog/createDept.vue";
// import { updateEnableStatus } from "@/api/lot/model/useColumns";
import { message } from "@/utils/message";
import { useRouter } from "vue-router";
const {
  listQuery,
  columns,
  pagination,
  getList,
  handleSizeChange,
  handleCurrentChange,
  handleFilter,
  listLoading,
  listData,
  handleDelete,
  dialogDeleteVisible,
  confirmDelete
} = useColumns();
defineOptions({
  name: "Monitoring"
});
const treeData = reactive([
  {
    label: 'Level one 1',
    children: [
      {
        label: 'Level two 1-1',
        children: [
          {
            label: 'Level three 1-1-1',
          },
        ],
      },
    ],
  },
  {
    label: 'Level one 2',
    children: [
      {
        label: 'Level two 2-1',
        children: [
          {
            label: 'Level three 2-1-1',
          },
        ],
      },
      {
        label: 'Level two 2-2',
        children: [
          {
            label: 'Level three 2-2-1',
          },
        ],
      },
    ],
  },
  {
    label: 'Level one 3',
    children: [
      {
        label: 'Level two 3-1',
        children: [
          {
            label: 'Level three 3-1-1',
          },
        ],
      },
      {
        label: 'Level two 3-2',
        children: [
          {
            label: 'Level three 3-2-1',
          },
        ],
      },
    ],
  },
])
const defaultProps = {
  children: 'children',
  label: 'label',
}
const nodeClick = node => {
  console.log(node)
}
const addNode = node => {
  console.log(node)
} 
</script>

<template>
  <div>
    <basic-layout :treeData="treeData" :defaultProps="defaultProps" @nodeClick="nodeClick"
      :buttonInfo="{ type: 'primary', name: '新增', icon: Search }"
      :treeButtonInfo="{ add: true, edit: true, remove: true }" @add-node="addNode">
      <!-- 如果自定义树内容 -->
      <!-- <template #tree></template> -->
      <!-- 树结构操作按钮 -->
      <template #search>
        <div class="search-left">
          <el-form :model="listQuery" inline>
            <el-form-item>
              <el-input v-model="listQuery.name" placeholder="请输入名称" />
            </el-form-item>
            <el-form-item>
              <el-select style="width: 200px;" v-model="listQuery.status" placeholder="请选择状态">
                <el-option label="启用" value="1" />
                <el-option label="禁用" value="0" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button @click="resetSearch">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="search-right">
          <el-button type="primary">新增</el-button>
        </div>
      </template>
      <!-- 表格 -->
      <template #tableContent>
        <PureTableBar :columns="columns" @refresh="getList">
          <template v-slot="{ size, dynamicColumns }">
            <pure-table default-expand-all ref="tableRef" row-key="id" adaptive table-layout="auto"
              :loading="listLoading" :size="size" :data="listData" :columns="dynamicColumns"
              :pagination="{ ...pagination, size }" :header-cell-style="{
                background: 'var(--el-fill-color-light)',
                color: 'var(--el-text-color-primary)'
              }" @page-size-change="handleSizeChange" @page-current-change="handleCurrentChange">
              <template #operation="{ row }">
                <el-button class="reset-margin" link type="primary" @click="openAddEditDialog(row)">
                  修改
                </el-button>
                <el-button class="reset-margin" link type="danger" v-if="!row.children" @click="handleDelete(row)">
                  删除
                </el-button>
              </template>
            </pure-table>
          </template>
        </PureTableBar>
      </template>
    </basic-layout>
  </div>
</template>